<script src="template/js/jquery.form.js"></script>
<!-- jQuery validation -->
<script src="template/js/lib/jquery-validation/jquery.validate.min.js"></script>

<script type="text/javascript">
    /* [ ---- Beoro Admin - form validation ---- ] */

    $(document).ready(function () {
        $("#reset").click(function () {
            var $contactform = $('#contact')
            $($contactform).find("input[type=text] , textarea ").each(function () {
                $(this).val('');
            });
        });
        //* form validation
        beoro_validate.simple();
    });

    //* form validation

    beoro_validate = {
        simple: function () {
            if ($('#contact').length) {
                $('#contact').validate({
                    onkeyup: false,
                    errorClass: 'error',
                    validClass: 'valid',
                    highlight: function (element) {
                        $(element).closest('div').addClass("f-error");
                    },
                    unhighlight: function (element) {
                        $(element).closest('div').removeClass("f-error");
                    },
                    errorPlacement: function (error, element) {
                        $(element).closest('div').append(error);
                    },
                    rules: {
                        name: { required: true },
                        user_email: {
                            required: true,
                            email: true
                        },
                        text: {
                            required: true,
                            minlength: 5 }
                    },
                    messages: {
                        name: "Введите ваше имя",
                        user_email: "Укажите правильный e-mail",
                        text: {
                            required: "Введите текст сообщения",
                            minlength: "Минимальная длинна сообщения: 5 символов"
                        }
                    },
                    invalidHandler: function (form, validator) {
                        //e.preventDefault();
                        // callback
                    },

                    submitHandler: function (form) {
                        var options = {
                            //target:        '#output2',   // target element(s) to be updated with server response
                            //beforeSubmit:  showRequest,  // pre-submit callback
                            success: showResponse,  // post-submit callback

                            // other available options:
                            //url:       url         // override for form's 'action' attribute
                            //type:      type        // 'get' or 'post', override for form's 'method' attribute
                            dataType: "json",         // 'xml', 'script', or 'json' (expected server response type)
                            clearForm: true        // clear all form fields after successful submit
                            //resetForm: true        // reset the form after successful submit

                            // $.ajax options can be used here too, for example:
                            //timeout:   3000
                        };
                        $('#contact').submit(function () {
                            // inside event callbacks 'this' is the DOM element so we first
                            // wrap it in a jQuery object and then invoke ajaxSubmit
                            $(this).ajaxSubmit(options);
                            // !!! Important !!!
                            // always return false to prevent standard browser submit and page navigation
                            return false;
                        });
                    }
                })
            }
        }
    };

    function showResponse(responseText, statusText, xhr, $form) {
        //colnsole.log(responseText);
        $.sticky(responseText.message, {autoclose: 3000, position: "top-center", type: responseText.type});
    }

</script>
<!-- main content -->
<div class="container">
    <div class="row-fluid">
        <div class="span12">
            <div class="w-box">
                <div class="w-box-header">
                    <h4>Обратная связь</h4>
                </div>
                <div class="w-box-content cnt_a">
                    <form action="mail_contact.php" id="contact" method="post">
                        <fieldset>
                            <legend>Обратная связь</legend>
                            <div class="row-fluid">
                                <div class="span6">
                                    <label class="req">Имя</label>
                                    <input type="text" name="name" id="name" placeholder="Введите ваше имя"
                                           class="span8">
                                    <label class="req">E-mail</label>
                                    <input type="text" name="user_email" id="user_email"
                                           placeholder="Укажите ваш e-mail" class="span8">
                                    <label class="req">Текст сообщения</label>
                                    <textarea id="text" rows="3" name="text" class="span8"></textarea>

                                    <div class="formSep sepH_b">
                                        <button class="btn btn-beoro-3" type="submit">Отправить</button>
                                        <button id="reset" class="btn btn-danger" type="button">Отменить</button>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer_space"></div>
</div>